<template>
	<view class="pageV">
		<u-navbar title="会员权益" placeholder :autoBack="true" leftIconColor="#fff" bgColor="#00000000"
			:titleStyle="titleStyle">
		</u-navbar>
		<view class="topV">
			<view class="leftV">
				<view class="nameTv">{{userInfo.nickname}}</view>
				<view class="vipV">
					<image class="vipIv" src="../../static/me/vip.svg"></image>
					<view class="vipTv">普通会员</view>
				</view>
			</view>
			<image class="avatarIv" :src="userInfo.avatar"></image>
		</view>
		<view class="cenV">
			<view class="mingxiV">
				<view class="mingxiTv1"><text class="mingxiTv2">0</text>/100</view>
				<view class="mingxiTv3">Super值变动明细 <u-icon name="arrow-right" color="#FFFFFF"></u-icon>
				</view>
			</view>
			<view class="lineV"></view>
			<view class="lableV">
				<view class="lableItemV">
					<image class="lableItemTv" src="../static/kamian.png"></image>
					<view class="lableItemIv">专属卡面</view>
				</view>
				<view class="lableItemV">
					<image class="lableItemTv" src="../static/xunzhang.png"></image>
					<view class="lableItemIv">专属勋章</view>
				</view>
				<view class="lableItemV">
					<image class="lableItemTv" src="../static/more.png"></image>
					<view class="lableItemIv">更多权益</view>
				</view>
			</view>
			<view class="openV" @click="onOpenClick">开通会员卡立享会员权益</view>
		</view>

		<view class="renwuV">
			<view class="topVV">
				<view class="topTv1">成长任务</view>
				<view class="topTv2">完成任务提升Super值</view>
			</view>
			<view class="renwuItemV">
				<view class="renwuItemTv1">训练次数+1 Super值 +100</view>
				<view class="renwuItemTv2">去完成</view>
			</view>
			<view class="renwuLine"></view>
		</view>

		<uni-popup ref="popup" type="bottom" background-color="#1F1F1F">
			<view class="popupBg">
				<view class="titleV">
					<view class="pupTitleTv">请选择会员卡</view>
					<image @tap="onClseClick" class="iv" src="../../static/public/colse.svg"></image>
				</view>

				<view class="popCenV">
					<scroll-view scroll-x="true" class="srvV">
						<view @click="onItemClick(item,key)" v-for="(item,key) in moneyList" :key="key" class="svItemV"
							:class="moneyPos==key?'svItemVTo':'svItemV'">
							<view
								style="height: 100%; justify-content: center; align-items: center; flex-direction: column; display: flex;">
								<view class="itemTv1">{{item.title}}</view>
								<view class="itemTv2">{{item.days}}{{item.unit}}</view>
								<view class="itemVV">
									<view class="itemTv3">¥</view>
									<view class="itemTv4">{{item.price}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="payTv" @click="onPayClick()">去支付</view>

				<view class="xieyiV">开通会员即表示同意：</view>

				<view class="xieyiVV">
					<view class="xieyi1" @click="onXieYiClick(1)">《充值协议》</view>
					<view class="xieyi1" @click="onXieYiClick(2)">《协议与规则》</view>
					<view class="xieyi1" @click="onXieYiClick(3)">《隐私政策》</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				userInfo: {},
				moneyDetail: {},
				moneyList: [],
				moneyPos: 0,
				money: 0,
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("user_info");
			this.getVipDetail();
		},
		methods: {
			getVipDetail() {
				this.$api.getVipList({}).then((res) => {
					if (res.vipList.length > 0) {
						this.moneyDetail = res.vipList[0];
						this.moneyList = res.vipList[0].pricedata;
						this.moneyList.push(...res.vipList[0].pricedata)
						this.moneyPos = 0;
						this.money = this.moneyList[0].price
					} else {
						uni.$u.toast("获取配置信息失败");
					}
				}).catch((e) => {
					uni.$u.toast("获取配置信息失败");
				})
			},
			onOpenClick() {
				this.$refs.popup.open()
			},
			onClseClick() {
				this.$refs.popup.close()
			},
			onItemClick(item, index) {
				this.moneyPos = index;
				this.money = item.price
			},
			onPayClick() {
				this.$api.setVipSubmit({
					paytype: "wechat",
					method: "miniapp",
					level: this.moneyDetail.level,
					days: this.moneyList[this.moneyPos].days
				}).then((res) => {
					this.payOrder(res);
				}).catch((e) => {
					uni.$u.toast("请求失败");
				})
			},
			payOrder(payData) {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payData.timeStamp,
					nonceStr: payData.nonceStr,
					package: payData.package,
					signType: payData.signType,
					paySign: payData.paySign,
					success: function(res) {
						uni.$u.toast("充值成功");
					},
					fail: function(err) {
						uni.$u.toast("充值失败");
					}
				})
			},
			onXieYiClick(typ){
				this.$u.route({
					url: '/mine/me/Agreement',
					params: {
						type: typ,
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.pageV {
		display: flex;
		flex-direction: column;
	}

	.topV {
		display: flex;
		height: 200rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		border-radius: 10rpx;
		border: 2rpx solid #E6A5B4;
		align-items: center;
		margin-top: 40rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;

		.leftV {
			flex: 1;

			.nameTv {
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.vipV {
				width: 160rpx;
				height: 40rpx;
				display: flex;
				margin-top: 30rpx;
				border-radius: 20rpx;
				border: 1rpx solid #979797;
				align-items: center;
				justify-content: center;

				.vipIv {
					width: 24rpx;
					height: 24rpx;
				}

				.vipTv {
					font-size: 24rpx;
					color: #8D8D8D;
					margin-left: 11rpx;
				}
			}
		}

		.avatarIv {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			background-color: antiquewhite;
		}
	}

	.cenV {
		background: #E6A5B4;
		border-radius: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 30rpx;
		padding-bottom: 40rpx;

		.mingxiV {
			display: flex;
			justify-content: space-between;
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin-top: 30rpx;

			.mingxiTv1 {
				font-size: 36rpx;
				color: #FFFFFF;
			}

			.mingxiTv2 {
				font-size: 36rpx;
				color: #9AB836;
			}

			.mingxiTv3 {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.lineV {
			height: 8rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			margin-top: 30rpx;
		}

		.lableV {
			display: flex;
			margin-top: 30rpx;

			.lableItemV {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				flex-direction: column;

				.lableItemTv {
					width: 92rpx;
					height: 92rpx;
				}

				.lableItemIv {
					margin-top: 9rpx;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}

		.openV {
			margin-top: 60rpx;
			height: 100rpx;
			background: #E6A5B4;
			border-radius: 50rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.renwuV {
		background: #E6A5B4;
		border-radius: 20rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;

		.topVV {
			display: flex;
			justify-content: space-between;
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin-top: 30rpx;
			align-items: center;


			.topTv1 {
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.topTv2 {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.renwuItemV {
			height: 119rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 30rpx;
			padding-right: 30rpx;

			.renwuItemTv1 {
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.renwuItemTv2 {
				background: #E6A5B4;
				border-radius: 10rpx;
				padding-top: 10rpx;
				padding-right: 23rpx;
				padding-left: 23rpx;
				padding-bottom: 10rpx;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.renwuLine {
			height: 1rpx;
			background: #FFFFFF;
		}
	}


	.popupBg {


		.titleV {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;

			.pupTitleTv {
				width: 100vw;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #E8E8E8;
			}

			.iv {
				width: 42rpx;
				height: 42rpx;
			}
		}

		.popCenV {
			display: flex;
			margin-top: 50rpx;
			height: 240rpx;

			.srvV {
				width: 100%;
				white-space: nowrap;
				vertical-align: middle;
				overflow: hidden;

				.svItemV {
					width: 190rpx;
					height: 230rpx;
					background: #00000000;
					border-radius: 10rpx;
					border: 3rpx solid #8D8D8D;
					margin-left: 30rpx;
					display: inline-block;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}

				.svItemVTo {
					width: 190rpx;
					height: 230rpx;
					background: rgba(206, 247, 67, 0.2);
					border-radius: 10rpx;
					border: 3rpx solid #CEF743;
					margin-left: 30rpx;
					display: inline-block;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}

				.itemTv1 {
					font-size: 32rpx;
					color: #FFFFFF;
				}

				.itemTv2 {
					font-size: 24rpx;
					color: #8D8D8D;
				}

				.itemVV {
					display: flex;
					align-items: baseline;

					.itemTv3 {
						font-size: 30rpx;
						color: #E6A5B4;
					}

					.itemTv4 {
						font-size: 50rpx;
						color: #E6A5B4;
					}
				}

			}
		}

		.payTv {
			height: 100rpx;
			background: #E6A5B4;
			border-radius: 50rpx;
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 30rpx;
			margin-right: 30rpx;
			text-align: center;
			font-size: 32rpx;
			color: #333737;
		}

		.xieyiV {
			font-size: 28rpx;
			color: #8D8D8D;
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.xieyiVV {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 3rpx;
			padding-bottom: 20rpx;

			.xieyi1 {
				font-size: 28rpx;
				color: #E6A5B4;
			}
		}
	}
</style>
